<template>
  <a-card
    class="menu-content-preview-pdf"
    :bodyStyle="{ flex: 1, overflowY: 'auto', position: 'relative' }"
    :bordered="false"
    title="内容预览"
    ref="contentRef"
  >
    <!-- <template #extra>
      <full-screen-toggle
        :content="contentRef"
        v-if="contentRef"
        :hasLabel="false"
      />
    </template> -->
    <a-spin
      v-if="loading"
      :spinning="loading"
      style="
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        background: rgba(255, 255, 255, 0.5);
      "
    />
    <div style="width: 100%; height: 100%" v-else>
      <preview-pdf :path="path" v-if="path" />
    </div>
  </a-card>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import PreviewPdf from '@/components/preview-pdf.vue'

import { getFilePreview, rewriteURL } from '@/api/db.js'
import { useDbType } from '@/views/db-management/provide-context.js'
import { message as Message } from 'ant-design-vue'

import FullScreenToggle from './menu-content-preview-model-button-full-screen-toggle.vue'
/**
 * 外部参数
 */
let props = defineProps({
  data: {
    required: true,
  },
})
let dbType = useDbType()
let loading = ref(false)
let path = ref()
let contentRef = ref()
onMounted(() => {
  loading.value = true
  getFilePreview({ id: props?.data?.id }, dbType)
    .then(response => {
      let file = new File(
        [response.data],
        `${props?.data?.fileName}.${props?.data?.fileType}`,
        { type: 'application/pdf' },
      )
      path.value = URL.createObjectURL(file)
      loading.value = false
    })
    .catch(async e => {
      try {
        let text = await e.text()
        let json = JSON.parse(text)
        Message.error(json.errorMessage || json.message || '文件加载失败')
      } catch (err) {
        Message.error('文件加载失败')
      }
      loading.value = false
    })
})
</script>
<style scoped lang="less">
.menu-content-preview-pdf {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>
